<template>
  <div>

    <el-card style="margin-left: 30px;">
      <div slot="header" class="clearfix">
        <span>模板文件清单</span>
        <el-button style="float: right; padding: 3px 0" @click="addTemp(typeData)" type="text">添加代码文件</el-button>
      </div>
      <vxe-table ref="xTable"
                 :loading="loading"
                 auto-resize
                 class="vxe-table-element"
                 max-height="450"
                 :data="templateList">
        <vxe-table-column type="index" width="60"></vxe-table-column>
        <vxe-table-column field="templateCode" title="genTableTemplate.templateCode"></vxe-table-column>
        <vxe-table-column field="templateName" title="genTableTemplate.templateName"></vxe-table-column>
        <vxe-table-column field="filePath" title="genTableTemplate.filePath"></vxe-table-column>
        <vxe-table-column field="fileName" title="genTableTemplate.fileName"></vxe-table-column>
        <vxe-table-column field="appType" title="genTableTemplate.appType" width="80">
          <template slot-scope="scope">
            {{$getDictLabel('GEN_TEMP_APP_TYPE', scope.row.appType)}}
          </template>
        </vxe-table-column>
        <vxe-table-column title="handle" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteTemp(scope.row)">移除</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </el-card>
    <table-template v-if="tableTemplateVisible" ref="tableTemplate" @setTemplateList="setTemplateList"></table-template>
  </div>
</template>
<script>
import TableTemplate from './tableTemplate'
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      tableTemplateVisible: false,
      loading: false,
      typeData: {},
      templateList: [],
      dataForm: {
        templateList: [],
        type: {}
      }
    }
  },
  components: {
    TableTemplate
  },
  created () {
    // 通过路由参数pid, 控制列表请求操作
    this.typeData = this.$route.params.data
    this.loading = true
    this.getDataList(this.typeData.tmpCode)
  },
  methods: {
    getDataList (typeCode) {
      this.loading = true
      this.$http.get(`/gen/genTableTemplate/listBytemplateType?templateType=${typeCode}`).then(({ data: res }) => {
        this.loading = false
        this.templateList = []
        if (res.code !== 0) {
          this.templateList = []
          return
        }
        this.templateList = res.data
      })
    },
    addTemp (row) {
      this.tableTemplateVisible = true
      this.dataForm.type = row
      this.$nextTick(() => {
        this.$refs.tableTemplate.init()
      })
    },
    deleteTemp (row) {
      this.tableTemplateVisible = true
      this.$confirm('确定要从列表中移除？', this.$t('prompt.title'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
        this.$http.post('/gen/genTableTemplateType/deleteTemplateType', {
          'typeCode': this.typeData.tmpCode,
          'tempCode': row.templateCode
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getDataList(this.typeData.tmpCode)
            }
          })
        }).catch(() => { })
      }).catch(() => { })
    },
    setTemplateList (tempList) {
      this.dataForm.templateList = tempList
      this.dataForm.type = {
        val: this.typeData.tmpCode,
        label: this.typeData.tmpName
      }
      this.dataFormSubmitHandle()
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$http.post('/gen/genTableTemplateType/', this.dataForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getDataList(this.dataForm.type.val)
          }
        })
      }).catch(() => {})
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
